<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 定义功能卡片数据
const features = ref([
  {
    title: '集群管理',
    description: '查看和管理您的 Kubernetes 集群，监控集群健康状态',
    icon: '🔄',
    route: '/cluster',
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    title: '节点监控',
    description: '实时监控节点状态，查看资源利用率和性能指标',
    icon: '📊',
    route: '/monitor',
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  },
  {
    title: '应用部署',
    description: '一键部署和管理容器化应用，简化部署流程',
    icon: '🚀',
    route: '/deploy',
    color: 'linear-gradient(135deg, #ff6b6b 0%, #ffa0a0 100%)'
  },
  {
    title: '日志分析',
    description: '集中查看和分析各种日志，快速定位问题',
    icon: '📝',
    route: '/logs',
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  }
]);

const isVisible = ref(false);

onMounted(() => {
  setTimeout(() => {
    isVisible.value = true;
  }, 100);
});
</script>

<template>
  <div class="home-container" :class="{ 'fade-in': isVisible }">

    <!-- 顶部欢迎横幅 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">欢迎使用 <span class="highlight">Flare</span> 系统</h1>
        <p class="hero-description">
          先进的云原生管理平台，为您的 Kubernetes 集群提供强大的管理能力
        </p>
        <div class="animation-container">
          <div class="floating-cube"></div>
          <div class="floating-cube"></div>
          <div class="floating-cube"></div>
        </div>
      </div>
    </section>

    <!-- 系统简介部分 -->
    <section class="intro-section">
      <h2>系统简介</h2>
      <div class="intro-content">
        <div class="intro-text">
          <p>Flare 是一个功能强大的云原生管理平台，专为简化 Kubernetes 集群的管理和监控而设计。无论您是运维工程师、开发人员还是系统管理员，Flare 都能帮助您高效地管理云基础设施。</p>
          <p>通过直观的界面，您可以轻松查看集群状态、部署应用、监控性能和分析日志，让复杂的云管理变得简单。</p>
        </div>
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-number">98%</div>
            <div class="stat-label">运维效率提升</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">60+</div>
            <div class="stat-label">内置功能</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">5min</div>
            <div class="stat-label">平均解决问题时间</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 功能导航卡片 -->
    <section class="features-section">
      <h2>功能导航</h2>
      <div class="features-grid">
        <div
          v-for="(feature, index) in features"
          :key="index"
          class="feature-card"
          :style="{ background: feature.color }"
        >
          <div class="feature-icon">{{ feature.icon }}</div>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
          <div class="card-overlay"></div>
        </div>
      </div>
    </section>

    <!-- 使用提示部分 -->
    <section class="tips-section">
      <h2>使用提示</h2>
      <div class="tip-container">
        <div class="tip-item">
          <div class="tip-number">1</div>
          <div class="tip-content">
            <h3>导航菜单</h3>
            <p>点击左侧导航菜单可以快速切换到不同的功能模块</p>
          </div>
        </div>
        <div class="tip-item">
          <div class="tip-number">2</div>
          <div class="tip-content">
            <h3>集群视图</h3>
            <p>在集群管理页面可以添加新集群或查看现有集群详情</p>
          </div>
        </div>
        <div class="tip-item">
          <div class="tip-number">3</div>
          <div class="tip-content">
            <h3>快速搜索</h3>
            <p>使用顶部搜索框可以快速找到集群、资源或日志信息</p>
          </div>
        </div>
      </div>
    </section>

  </div>
</template>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-in {
  opacity: 1;
}

h2 {
  font-size: 2rem;
  color: #334155;
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 1rem;
}

h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 4px;
  background: linear-gradient(to bottom, #3b82f6, #2563eb);
  border-radius: 2px;
}

/* 顶部欢迎横幅 */
.hero-section {
  background: linear-gradient(135deg, #1e293b, #334155);
  border-radius: 16px;
  padding: 3rem 2rem;
  margin-bottom: 3rem;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.highlight {
  color: #38bdf8;
  font-weight: 800;
}

.hero-description {
  font-size: 1.25rem;
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.animation-container {
  position: absolute;
  right: 30px;
  top: 0;
  height: 100%;
  width: 300px;
}

.floating-cube {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  animation: float 6s infinite ease-in-out;
}

.floating-cube:nth-child(1) {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}

.floating-cube:nth-child(2) {
  top: 40%;
  left: 60%;
  width: 80px;
  height: 80px;
  animation-delay: 1s;
}

.floating-cube:nth-child(3) {
  top: 70%;
  left: 40%;
  width: 40px;
  height: 40px;
  animation-delay: 2s;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* 系统简介部分 */
.intro-section {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.intro-content {
  display: flex;
  gap: 3rem;
  align-items: center;
}

.intro-text {
  flex: 3;
}

.intro-text p {
  margin-bottom: 1rem;
  line-height: 1.7;
  color: #4b5563;
  font-size: 1.05rem;
}

.stats-container {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2563eb;
  min-width: 100px;
}

.stat-label {
  font-size: 1.1rem;
  color: #64748b;
}

/* 功能导航卡片 */
.features-section {
  margin-bottom: 3rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  border-radius: 16px;
  padding: 2rem;
  color: white;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.feature-card .card-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover .card-overlay {
  opacity: 1;
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.feature-card p {
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.5;
}

/* 使用提示部分 */
.tips-section {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 3rem;
}

.tip-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tip-item {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.tip-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  flex-shrink: 0;
}

.tip-content h3 {
  font-size: 1.2rem;
  color: #334155;
  margin-bottom: 0.5rem;
}

.tip-content p {
  color: #64748b;
  line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .intro-content {
    flex-direction: column;
    gap: 2rem;
  }

  .stats-container {
    width: 100%;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-description {
    font-size: 1.1rem;
  }

  .animation-container {
    display: none;
  }
}

@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .hero-section {
    padding: 2rem 1.5rem;
  }

  h2 {
    font-size: 1.8rem;
  }
}
</style>
